<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <a-col :span='24'>
            <a-form-item label='项目专题' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-popup
                v-decorator="['subjectName']"
                :trigger-change='true'
                org-fields='id,subject_name'
                dest-fields='subjectId,subjectName'
                code='pm_subject_select'
                :param='{projectId: this.projectId}'
                :disabled="this.isAdd==='1'&&this.planType==='3'"
                @callback='subjectPopupCallback'
              />
              <input v-decorator="['subjectId']" v-show='false'></input>
              <a-input v-decorator="['projectId']" v-show='false'></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='24'>
            <a-form-item label='关键目标' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-popup
                v-decorator="['targetName']"
                :trigger-change='true'
                org-fields='id,target_name'
                dest-fields='targetId,targetName'
                code='pm_target_select'
                :param='{subjectId:this.selectSubjectId}'
                :disabled="this.isAdd==='1'&&this.planType==='3'"
                @callback='popupCallback'
              />
              <a-input v-decorator="['targetId']" v-show='false'></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="任务描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea v-decorator="['taskDes', validatorRules.taskDes]"
                          :disabled="this.isAdd==='1'&&this.planType==='3'"
                          rows="4" placeholder="请输入任务描述"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="任务状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list"
                                 v-decorator="['taskState', validatorRules.taskState]"
                                 :trigger-change="true"
                                 dictCode="pm_project_task_state"
                                 placeholder="请选择任务状态"
                                 :disabled="this.isAdd==='2'"
                                 @change='taskStateChange'
              />
            </a-form-item>
          </a-col>
          <a-col :span="24"  v-if="taskStateType === '3'" >
            <a-form-item label="未完成原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea
                v-decorator="['incompleteCause',validatorRules.incompleteCause]"
                rows="4"
                placeholder="请输入未完成原因"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="责任人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep v-decorator="['dutyPersionId']"
                                    :disabled="this.isAdd==='1'&&this.planType==='3'"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="检查人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep v-decorator="['examiner']" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="disableSubmit">
            <a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep v-decorator="['createBy']" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="disableSubmit">
            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date v-decorator="['createTime']" :disabled="true" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>

      <hf-subject-select-modal ref="hfSubjectSelectModal" :multiple="false" @hf-subject-select="hfSubjectSelect"/>
      <hf-targets-select-modal ref="hfTargetsSelectModal" :multiple="false" @hf-targets-select="hfTargetsSelect"/>

    </a-spin>
  </j-modal>
</template>

<script>

import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import {validateDuplicateValue} from '@/utils/util'
import HfSubjectSelectModal from './HfSubjectSelectModal'
import HfTargetsSelectModal from './HfTargetsSelectModal'

export default {
  name: "HfPmProjectTasksModal",
  components: {
    HfSubjectSelectModal,
    HfTargetsSelectModal
  },
  props: {
    mainId: {
      type: String,
      required: false,
      default: ''
    },
    projectId: {
      type: String,
      required: false,
      default: ''
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      title: "操作",
      width: 800,
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      disableSubmit: false,
      validatorRules: {

        subjectName: {
          rules: [
            {required: true, message: '请选择项目专题!'},
          ]
        },
        targetName: {
          rules: [
            {required: true, message: '请选择关键目标!'},
          ]
        },
        taskDes: {
          rules: [
            {required: true, message: '请输入任务描述!'},
          ]
        },
        incompleteCause: {
          rules: [
            { required: true, message: '请输入未完成原因!' }
          ]
        },
      },
      url: {
        add: "/pm/hfPmDoubleWeekPlan/addHfPmProjectTasks",
        edit: "/pm/hfPmDoubleWeekPlan/editHfPmProjectTasks",
      },
      fields:[
        'createBy', 'createTime', 'updateBy', 'updateTime', 'sysOrgCode', 'deleteFlag', 'planId', 'projectId', 'subjectId', 'subjectName', 'subjectCode', 'targetId', 'targetName', 'targetCode', 'taskCode', 'taskDes', 'planStartTime', 'planEndTime', 'closeTime', 'taskState', 'dutyPersionId', 'remarks', 'incompleteCause', 'examiner', 'examinerName', 'examinerTime'
      ],
      isAdd: "",
      planType: '',
      taskStateType:'',
      defaultModel: {},
      selectSubjectId:''
    }
  },
  created() {
  },
  methods: {
    taskStateChange(value) {
      this.taskStateType = value
    },
    addRecord(record) {
      console.log("isAdd"+this.isAdd)
      console.log("planType"+this.planType)
      this.edit(record)
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, this.fields))
      })
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.taskStateType = ''
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          if ('3' == values.taskState && (null == values.incompleteCause || '' == values.incompleteCause || undefined == values.incompleteCause)) {
            this.$message.error('请填写未完成原因后再提交!');
            return;
          }
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          let formData = Object.assign(this.model, values);
          formData['planId'] = this.mainId
          console.log("表单提交数据", formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }

      })
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    handleCancel() {
      this.close()
    },
    popupCallback(row){
      this.form.setFieldsValue(pick(row,this.fields))
    },
    subjectPopupCallback(row) {
      this.form.setFieldsValue(pick(row,this.fields))
      this.selectSubjectId = row.subjectId
    },
    subjectNameClick() {
      this.$nextTick(() => {
        this.$refs.hfSubjectSelectModal.title = '选择专题'
        this.$refs.hfSubjectSelectModal.visible = true
      })
    },
    hfSubjectSelect(data) {
      this.form.setFieldsValue({
        subjectId: data.id,
        subjectName: data.subjectName,
        subjectCode: data.subjectCode,
        projectId: data.projectId
      })
    },
    targetNameClick() {
      this.$nextTick(() => {
        this.$refs.hfTargetsSelectModal.title = '选择关键目标'
        this.$refs.hfTargetsSelectModal.visible = true
      })
    },
    hfTargetsSelect(data) {
      this.form.setFieldsValue({
        targetId: data.id,
        targetName: data.targetName,
        targetCode: data.targetCode
      })
    },
  }
}
</script>
